<template>
  <div>
    <CityHeader></CityHeader>
    <CityList :hot-cities="hotCities" :cities="cities "></CityList>
  </div>
</template>

<script>
import axios from 'axios'
import CityHeader from './components/Header'
import CityList from './components/List'
  export default {
    name: "City",
    components: {
      'CityHeader': CityHeader,
      'CityList': CityList
    },
    data: function(){
      return {
        hotCities: [],
        cities: {}
      }
    },

    methods: {
      getCityInfo: function(){
        axios.get('/api/city.json')
          .then(this.getCityInfoSuccess)
      },
      getCityInfoSuccess: function(res){
        var data = res.data.data;
			  this.hotCities = data.hotCities;
			  this.cities = data.cities;
      }
    },

    mounted: function(){
      this.getCityInfo();
    }
  }
</script>

<style lang="stylus" scoped>

</style>